<app-common-bar (create)="create()" (refresh)="load()" (search)="search($event)" [loading]="loading"
                [(view)]="view"></app-common-bar>
<!--卡片视图-->
<div *ngIf="view=='card'">
  <nz-row [nzGutter]="[8,8]">
    <div nz-col [nzSpan]="12" [nzXs]="24" [nzSm]="12" [nzMd]="12" [nzLg]="8" [nzXl]="6" [nzXXl]="4"
         *ngFor="let data of datum; let i=index" >
      <nz-card (click)="open(data)" nzSize="small" nzHoverable [nzTitle]="'服务器：'+data.id" [nzExtra]="extraTemplate">
        <p>{{data.name}} {{data.running ? '[在线]' : '[离线]'}}</p>
        <p>{{data.type}} {{data.addr}}</p>
      </nz-card>
      <ng-template #extraTemplate>
        <a nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click" (click)="$event.stopPropagation()">
          更多
          <i nz-icon nzType="down"></i>
        </a>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item>
              <a [routerLink]="'/admin/server/detail/'+data.id">详情</a>
            </li>
            <li nz-menu-item>
              <a [routerLink]="'/admin/server/edit/'+data.id">编辑</a>
            </li>
            <li nz-menu-item [nzDisabled]="!data.disabled" (click)="enable(data)">启用</li>
            <li nz-menu-item [nzDisabled]="data.disabled" nz-popconfirm nzPopconfirmTitle="确定禁用？"
                (nzOnConfirm)="disable(data)">禁用
            </li>
            <li nz-menu-item nzDanger nz-popconfirm nzPopconfirmTitle="确定删除？" (nzOnConfirm)="remove(data, i)">删除</li>
          </ul>
        </nz-dropdown-menu>
      </ng-template>
    </div>
  </nz-row>

  <nz-empty *ngIf="!datum?.length" nzNotFoundImage="simple"></nz-empty>

  <nz-pagination nzSize="small" style="margin-top: 20px"
                 [nzPageSize]="pageSize"
                 [nzTotal]="total"
                 [nzPageIndex]="pageIndex"
                 (nzPageIndexChange)="onPageChange($event)"
  ></nz-pagination>
</div>

<!--列表视图-->
<nz-table *ngIf="view=='list'"
    nzSize="small"
    [nzData]="datum"
    [nzFrontPagination]="false"
    [nzLoading]="loading"
    [nzTotal]="total"
    [nzPageSize]="pageSize"
    [nzPageIndex]="pageIndex"

    (nzQueryParams)="onQuery($event)"
  >
    <thead>
    <tr>
      <th nzColumnKey="id" [nzSortFn]="true">ID</th>
      <th nzColumnKey="name" [nzSortFn]="true">名称</th>
      <th nzColumnKey="type" [nzFilters]="filterType" [nzFilterFn]="true">类型</th>
      <th nzColumnKey="addr" [nzSortFn]="true">地址</th>
      <th nzColumnKey="created" [nzSortFn]="true">创建时间</th>
      <th>状态</th>
      <th nzWidth="100">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of datum; let i=index" (dblclick)="open(data)">
      <td>{{ data.id }}</td>
      <td>{{data.disabled ? '❌' : ''}}{{ data.name }}</td>
      <td>{{ data.type }}</td>
      <td>{{ data.addr }}</td>
      <td [title]="data.created|dateString">{{data.created | fromNow }}</td>
      <td>{{data.running ? '在线' : '离线'}}</td>
      <td>
        <a [routerLink]="'/admin/server/detail/'+data.id">详情</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a [routerLink]="'/admin/server/edit/'+data.id">编辑</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click">
          更多
          <i nz-icon nzType="down"></i>
        </a>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item [nzDisabled]="!data.disabled" (click)="enable(data)">启用</li>
            <li nz-menu-item [nzDisabled]="data.disabled" nz-popconfirm nzPopconfirmTitle="确定禁用？"
                (nzOnConfirm)="disable(data)">禁用
            </li>
            <li nz-menu-item nzDanger nz-popconfirm nzPopconfirmTitle="确定删除？" (nzOnConfirm)="remove(data, i)">删除</li>
          </ul>
        </nz-dropdown-menu>
      </td>
    </tr>
    </tbody>
  </nz-table>

